<script setup lang="ts">
import { useRouter } from 'vue-router';

defineProps<{
  title?: string
  rightText?: string
}>()

const emit = defineEmits<{
    (e: 'click-right'): void
}>()
const onClickRight = ()=>{
    emit('click-right')
}
const router = useRouter()
const onClickLeft = ()=>{
    if (history.state?.back){
        router.back()
    } else {
        router.push('/')
    }

}
</script>

<template>
  <!-- 固定定位，左侧箭头，标题，右侧文字 -->
  <van-nav-bar 
  fixed 
  left-arrow 
  :title="title" 
  :right-text="rightText"
  @click-right="onClickRight"
  @click-left="onClickLeft"
  ></van-nav-bar>
</template>

<style lang="scss" scoped>
// 覆盖组件样式，要用深度覆盖选择器
:deep() {
  // .van-nav-bar__title {
  //     font-size: 15px;
  // }
  // .van-nav-bar__arrow {
  //     font-size: 18px;
  //     color: var(--cp-text1);
  // }
  .van-nav-bar {
    &__arrow {
      font-size: 18px;
      color: var(--cp-text1);
    }
    &__title {
      font-size: 15px;
    }
  }
}
</style>
